<!DOCTYPE html>
<html lang="en">
<!-- https://codepen.io/danielkvist/pen/LYNVyPL -->

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>L-S Manager</title>
	<style>
		:root {
			/* COLORS */
			--white: #e9e9e9;
			--gray: #333;
			--blue: #0367a6;
			--lightblue: #008997;

			/* RADII */
			--button-radius: 0.7rem;

			/* SIZES */
			--max-width: 758px;
			--max-height: 420px;

			font-size: 16px;
			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
				Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
		}

		body {
			align-items: center;
			background-color: var(--white);
			background: url("./鹿鸣1.jpg");
			/* 决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。 */
			/* https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-attachment */
			background-attachment: fixed;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			display: grid;
			height: 100vh;
			place-items: center;
		}

		.form__title {
			font-weight: 300;
			margin: 0;
			margin-bottom: 1.25rem;
		}

		.link {
			color: var(--gray);
			font-size: 0.9rem;
			margin: 1.5rem 0;
			text-decoration: none;
		}

		.container {
			background-color: var(--white);
			border-radius: var(--button-radius);
			box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),
				0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
			height: var(--max-height);
			max-width: var(--max-width);
			overflow: hidden;
			position: relative;
			width: 100%;
		}

		.container__form {
			height: 100%;
			position: absolute;
			top: 0;
			transition: all 0.6s ease-in-out;
		}

		.container--signin {
			left: 0;
			width: 50%;
			z-index: 2;
		}

		.container.right-panel-active .container--signin {
			transform: translateX(100%);
		}

		.container--signup {
			left: 0;
			opacity: 0;
			width: 50%;
			z-index: 1;
		}

		.container.right-panel-active .container--signup {
			animation: show 0.6s;
			opacity: 1;
			transform: translateX(100%);
			z-index: 5;
		}

		.container__overlay {
			height: 100%;
			left: 50%;
			overflow: hidden;
			position: absolute;
			top: 0;
			transition: transform 0.6s ease-in-out;
			width: 50%;
			z-index: 100;
		}

		.container.right-panel-active .container__overlay {
			transform: translateX(-100%);
		}

		.overlay {
			background-color: var(--lightblue);
			background: url("./background.jpg");
			background-attachment: fixed;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			height: 100%;
			left: -100%;
			position: relative;
			transform: translateX(0);
			transition: transform 0.6s ease-in-out;
			width: 200%;
		}

		.container.right-panel-active .overlay {
			transform: translateX(50%);
		}

		.overlay__panel {
			align-items: center;
			display: flex;
			flex-direction: column;
			height: 100%;
			justify-content: center;
			position: absolute;
			text-align: center;
			top: 0;
			transform: translateX(0);
			transition: transform 0.6s ease-in-out;
			width: 50%;
		}

		.overlay--left {
			transform: translateX(-20%);
		}

		.container.right-panel-active .overlay--left {
			transform: translateX(0);
		}

		.overlay--right {
			right: 0;
			transform: translateX(0);
		}

		.container.right-panel-active .overlay--right {
			transform: translateX(20%);
		}

		.btn {
			background-color: var(--blue);
			background-image: linear-gradient(90deg, var(--blue) 0%, var(--lightblue) 74%);
			border-radius: 20px;
			border: 1px solid var(--blue);
			color: var(--white);
			cursor: pointer;
			font-size: 0.8rem;
			font-weight: bold;
			letter-spacing: 0.1rem;
			padding: 0.9rem 4rem;
			text-transform: uppercase;
			transition: transform 80ms ease-in;
		}

		.form>.btn {
			margin-top: 1.5rem;
		}

		.btn:active {
			transform: scale(0.95);
		}

		.btn:focus {
			outline: none;
		}

		.form {
			background-color: var(--white);
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			padding: 0 3rem;
			height: 100%;
			text-align: center;
		}

		.input {
			background-color: #fff;
			border: none;
			padding: 0.9rem 0.9rem;
			margin: 0.5rem 0;
			width: 100%;
		}

		.axis {
			position: relative;
			float: left;
		}

		.axis input {
			background-color: #fff;
			border: none;
			padding: 0.9rem 0.9rem;
			margin: 0.5rem 0;
			width: 30px;
		}

		@keyframes show {

			0%,
			49.99% {
				opacity: 0;
				z-index: 1;
			}

			50%,
			100% {
				opacity: 1;
				z-index: 5;
			}
		}
	</style>
</head>

<body>
	<div class="container right-panel-active">
		<!-- 查询数据 -->
		<div class="container__form container--signup">
			<form action="transfer.php" class="form" id="form1">
				<h2 class="form__title">选择表单</h2>
				<select name="tableName" class="input">
					<option>sensordata</option>
					<option>nodelocalinfo</option>
					<option>nodearray</option>
				</select>
				<input type="submit" class="btn" name="query" value="查询数据" />
				<input type="submit" class="btn" name="query" value="下载数据" />
			</form>
		</div>

		<!-- 注册设备 -->
		<div class="container__form container--signin">
			<form action="./source/registerDev.php" class="form" id="form2" method="post">
				<h2 class="form__title">注册设备</h2>
				<input type="text" placeholder="GatewayID" class="input" name="GatewayID" />
				<input type="text" placeholder="NodeName" class="input" name="NodeName" />
				<div class="axis">
					Area：&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="text" placeholder="X" class="" name="Area-X" />
					<input type="text" placeholder="Y" class="" name="Area-Y" />
				</div>
				<div class="axis">
					Axis：&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="text" placeholder="X" class="" name="Axis-X" />
					<input type="text" placeholder="Y" class="" name="Axis-Y" />
				</div>

				<input class="btn" type="submit" value="提交"></input>
			</form>
		</div>

		<!-- Overlay -->
		<div class="container__overlay">
			<div class="overlay">
				<div class="overlay__panel overlay--left">
					<button class="btn" id="signIn">注册设备</button>
				</div>
				<div class="overlay__panel overlay--right">
					<button class="btn" id="signUp">查询数据</button>
				</div>
			</div>
		</div>
	</div>
</body>

<script>
	const signInBtn = document.getElementById("signIn");
	const signUpBtn = document.getElementById("signUp");
	const container = document.querySelector(".container");

	signInBtn.addEventListener("click", () => {
		container.classList.remove("right-panel-active");
	});

	signUpBtn.addEventListener("click", () => {
		container.classList.add("right-panel-active");
	});

	secondForm.addEventListener("submit", (e) => {
		e.preventDefault();
		let email = document.getElementById("Email");
		let password = document.getElementById('Password');

		console.log(
			`This form has a username of ${email.value} and password of ${password.value}`
		);
		if (email.value == "1839346873@qq.com" || password.value == "111111") {
			// 用表单输入进行操作
			alert("This form has been successfully submitted!");
			window.location.href = "index.php"

			email[0] = "";
			password[0] = "";
		} else {
			alert("Ensure you input a value in both fields!");
		}
	});
</script>

</html>